{% extends "/shared/layout.html" %}
{% block mainContent %}
<div class="header">
  <div class="wrapper">
    <ul>
      <li class="li_750">
        {% include "/shared/user_partial.html" %}
      </li>
      <li class="li_250">
        <div class="u_message">
          <dl>
            <dd class="ddHover">
              <em class="icon_msg"></em>
              <label>{{pageRes.lblNoReadMsg}}:</label><span class="h1">{{message_summary.unread_msg_cnt}}</span>{{pageRes.unitMsgRecord}}
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="wrapper msg_main">
    <div class="msg_date_nav">
      <ul>
        <li class="selected" ><a href="#now">{{pageRes.timeNow}}</a></li>
        {% for yearModel in  message_summary.timelines %}
          <li date-time="{{yearModel.year+yearModel.months[0]}}">
            <a href="#{{yearModel.year+yearModel.months[0]}}">{{yearModel.year}}{{layoutRes.unitYear}}</a>
            <ol>
              {% for month in yearModel.months %}
                <li date-time="{{yearModel.year+month}}">
                  <a href="#{{yearModel.year+month}}">{{month}}{{layoutRes.unitMonth}}</a>
              {% endfor %}
            </ol>
          </li>
        {% endfor %}
        <li><a href="#activate">{{pageRes.timeActivate}}</a></li>
      </ul>
    </div>
    <div class="msg_list">
      <a name="now"></a>
      <div class="list_header">{{message_summary.timelines[0].year}}</div>
      <div class="list_main">
        {% for yearModel in  message_summary.timelines %}
          {% for month in yearModel.months %}
            <a name="{{yearModel.year+month}}"></a>
            <ul></ul>
          {% endfor %}
        {% endfor %}
      </div>
      <div id="loading" class="loading">
        <img src="../static/images/loading.gif">
      </div>
      <a name="activate"></a>
      <div class="list_bottom">{{pageRes.timeActivate}}</div>
    </div>
    <ul id="tmpMsgContainer" style="display:none;">
      <li>
        <div class="msg_box" attr-id="${message_id}">
          <div class="title">${fn:message_time}
            <span class="msg_type ${fn:msg_type}">${fn:type}</span>
          </div>
          <div class="content">${content}</div>
        </div>
      </li>
    </ul>
</div>
<script type="text/javascript" src="../static/scripts/views/message/etlinking.views.message.js"></script>
<script type="text/javascript">
  $(function() {
    nsbase.views.message.init();    
  });
</script>
{% endblock %}